import React, { Component, createRef } from "react";
import { Modal, Input, Form, Button } from "antd"
export default class Dialog extends Component {
    state = {
        isModalVisible: false,
    }
    form = createRef()
    // 点击打开弹框
    add = () => {
        this.setState({
            isModalVisible: true
        })
        this.form.current.resetFields()
    }
    // 点击确定
    handleOk = async () => {
        let res = await this.form.current.validateFields()
        if (this.props.isUpdata == 0) {
            let key = +new Date
            let obj = { key, ...res }
            this.props.addLiat(obj)
        } else {
            this.props.editList(res)
        }
        this.handleCancel()
        console.log(res)
    }
    // 点击取消
    handleCancel = () => {
        this.setState({
            isModalVisible: false
        })
    }
    updataDia = () => {
        this.setState({
            isModalVisible: true
        })
    }
    render() {
        let { isModalVisible } = this.state
        return (
            <div>
                <Button type='primary' onClick={this.add}>添加</Button>
                <Modal
                    title="Basic Modal"
                    visible={isModalVisible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <Form ref={this.form}>
                        <Form.Item label="name"
                            name="name"
                            rules={[{ required: true, message: 'Please input your name!' }]}>
                            <Input />
                        </Form.Item>

                        <Form.Item label="age"
                            name="age"
                            rules={[{ required: true, message: 'Please input your age!' }]}>
                            <Input />
                        </Form.Item>

                        <Form.Item label="address"
                            name="address"
                            rules={[{ required: true, message: 'Please input your address!' }]}>
                            <Input />
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}